<template>
  <div class="article">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/article' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片内容 -->
    <el-card class="card_main">
      <!-- 搜索内容区域 -->
      <el-row :gutter="100">
        <el-col :span="8">
         <!-- 搜索文章区域 -->
        <el-input placeholder="请输入标题" v-model="pageData.query" @change="handleBlur" clearable @blur="handleBlur">
          <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
        </el-col>
        <!-- 添加文章区域 -->
        <el-col :span="4">
          <el-button type="primary" @click="handleAdd">添加文章</el-button>
        </el-col>
      </el-row>
      <!-- 文章列表区域 -->
      <el-table
      ref="singleTable"
      :data="dataList"
      border
      stripe
      highlight-current-row
      style="width: 100%"
      class="tableList">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        property="title"
        label="标题"
        width="200">
      </el-table-column>
      <el-table-column
        property="des"
        label="简介">
      </el-table-column>
      <el-table-column
        property="times"
        label="发布日期"
        width="220">
        <template slot-scope="scope">
          {{scope.row.times | dateFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button icon="el-icon-search" type="success" circle size="small" @click="handleShow(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" size="small" circle @click="handleEdit(scope.row)"></el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" circle @click="removeByid(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="pageData.pagenum"
       :page-sizes="[1, 3, 6, 9]"
       :page-size="pageData.pagesize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
    </el-pagination>

    </el-card>

    <!-- 查看文章内容对话框 -->
    <el-dialog
      title="文章内容"
      :visible.sync="isContent"
      width="50%">
      <div v-html="content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isContent = false">取 消</el-button>
        <el-button type="primary" @click="isContent = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      // 文章总条数
      total: 0,
      // 查询文章
      pageData: {
        query: '',
        pagenum: 0,
        pagesize: 3
      },
      // 文章内容对话框
      isContent: false,
      // 当前文章内容
      content: ''
    }
  },
  methods: {
    // 获取文章列表
    async getList () {
      const { data: res } = await this.$http.get('/more', {
        params: this.pageData
      })
      if (res.meta.status !== 200) return this.$message.error('获取文章失败')
      this.dataList = res.data.mores
      this.total = res.data.totalpage
    },
    // 查看文章内容
    handleShow (row) {
      this.isContent = true
      this.content = row.content
    },
    // 搜索框失去焦点事件
    handleBlur () {
      // eslint-disable-next-line eqeqeq
      if (this.pageData.query == '') {
        this.getList()
      }
    },
    // 修改文章
    handleEdit (row) {
      var id = row.id
      this.$router.push({ name: 'edit', params: { id: id } })
    },
    // 删除文章
    async removeByid (id) {
      const confirm = await this.$confirm('此操作将永久删除该文章，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return 'ok'
      }).catch(() => {
        return 'err'
      })
      if (confirm !== 'ok') return this.$message.info('取消删除')
      const { data: res } = await this.$http.delete('/more', {
        params: {
          id: id
        }
      })
      if (res.meta.status !== 201) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      // 刷新页面
      this.getList()
    },
    // 添加文章
    handleAdd () {
      this.$router.push('/article/add')
    },
    // 选择分页条数
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.getList()
    },
    // 选择页
    handleCurrentChange (val) {
      this.pageData.pagenum = val
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.tableList{
  margin-top: 40px;
}
</style>
